<style lang="scss" rel="stylesheet/scss">
body.modal-open {
    position: fixed;
    width: 100%;
}
    .j-add-dialog-href {
        position: fixed;
        top: 45px;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 99;
        background: rgba(0,0,0,0.5);
        .href-content {
            max-height: 30rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            // top: 45px;
            background: #fff;
            padding: 0.5rem;
            text-align: left;
            overflow: auto;
            .top {
                line-height: 2rem;
                height: 2rem;
                margin-bottom: 1rem;
                span {
                    color: #666;
                    border: 1px solid #afafaf;
                    padding: 0 1rem;
                    float: left;
                    border-radius: 4px;
                    &:nth-child(2) {
                        float: right;
                    }
                }
            }
            .input-item {
                clear: both;
                p {
                    font-size: 1rem;
                    color: #333;
                    line-height: 2.5rem;
                    span {
                        font-size: 0.7rem;
                        color: #868686;
                    }
                }
                .textarea {
                    border: 1px solid #f5f5f5;
                }
                .input-img-div {
                    text-align: center;
                    .input-img {
                        width: 100%;
                        .iconfont {
                            font-size: 2.5rem;
                            color: #666;
                        }
                        p {
                            font-size: 0.8rem;
                            color: #555;
                        }
                    }
                    img {
                        // width: 100%;
                        // height: 4rem;
                        width: 30%;
                        max-height: 7rem;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="j-add-dialog-href">
        <div class="href-content" ref="add_href">
            <div class="top">
                <span class="left" @click="submit(0)">取消</span>
                <span class="left" @click="submit(1)">完成</span>
            </div>
            <div class="input-item">
                <p>输入链接 <span >输入或复制链接到此处(以http://或https://开头)</span></p>
                <van-field
                    required
                    v-model="hrefObj.link_content"
                    type="textarea"
                    class="font-normal-small font-deep-normal textarea"
                    rows="2"
                    autosize>
                </van-field>
            </div>
            <div class="input-item img">
                <p>链接图片</p>
                <div class="input-img-div">
                    <van-uploader class="input-img" :after-read="onReadImg" accept="image/*">
                        <p class="iconfont icon-tupian"></p>
                        <p>添加图片</p>
                    </van-uploader>
                    <img v-if="hrefObj.link_img" :src="hrefObj.link_img" alt="">
                </div>
            </div>
            <div class="input-item">
                <p>链接文字</p>
                <van-field
                    placeholder="限制12个字"
                    v-model="hrefObj.link_text"
                    type="textarea"
                    class="font-normal-small font-deep-normal textarea"
                    rows="1"
                    autosize>
                </van-field>
            </div>
        </div>
    </div>
</template>

<script>
    import { client } from 'utils/alioss'
    import * as toolsUtils from 'utils/toolsUtils'
    var ModalHelper = (function(bodyCls) {
        var scrollTop;
        return {
            afterOpen: function() {
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px';
            },
            beforeClose: function() {
            document.body.classList.remove(bodyCls);
            // scrollTop lost after set position:fixed, restore it back.
            document.scrollingElement.scrollTop = scrollTop;
            }
        };
    })('modal-open');
    export default {
        components: {
        },
        props:['show'],
        computed: {
            
        },
        data () {
            return {
                dialogShow: this.show,
                hrefObj: {
                    link_content: ' ',
                    link_img: '',
                    link_text: ''
                }
            }
        },
        beforeCreate () {
            
        },
        created () {
        },
        watch: {
            
        },
        mounted() {
            // document.body.style.overflow = 'hidden'
            // this.$refs.add_href.style.overflow = 'auto'

            ModalHelper.afterOpen()

            // 禁止滚动
            // this.stopScroll()
            if(sessionStorage.getItem('linkobj')) {
                let obj = JSON.parse(sessionStorage.getItem('linkobj'))
                this.hrefObj.link_content = obj.link_content
                this.hrefObj.link_img = obj.link_img || ''
                this.hrefObj.link_text = obj.link_text || ''
            }
        },
        methods: {
            // 上传图片
            onReadImg(file) {
                this.hrefObj.link_img = file.content
                file = file.file
                var fileName = `${new Date().getTime()}href_${file.name}`
                // ali oss直传
                client().put(fileName, file).then(
                    result => {
                        console.log(result)
                        this.hrefObj.link_img = result.url
                    })
            },
            submit(type) {
                if(type === 1) {
                    if(!this.hrefObj.link_content) {
                        xmview.showToast('链接地址不能是空哦~')
                        return
                    }else if(!toolsUtils.checkHref2(this.hrefObj.link_content)) {
                        xmview.showToast('请输入有效的链接地址哦~')
                        return
                    }else if(this.hrefObj.link_text.length > 12) {
                        xmview.showToast('链接文字能超过12个字哦~')
                        return
                    }
                    sessionStorage.setItem('linkobj',JSON.stringify(this.hrefObj))
                }
                // this.startScroll()
                ModalHelper.beforeClose()
                this.$emit('submit',type)
            },
            bodyScroll(event) {
                event.preventDefault()
            },
            stopScroll () {
                document.body.style.overflow = 'hidden'
                this.$refs.add_href.style.overflow = 'auto'
                document.addEventListener('touchmove', this.bodyScroll, {passive: false})
            },
            startScroll () {
                document.body.style.overflow = ''// 出现滚动条
                document.removeEventListener('touchmove', this.bodyScroll, {passive: false})
            }
        },
        
    }
</script>

